<script setup lang="ts">
import { computed, reactive } from 'vue';
import { Horizontal as NutIconHorizontal } from '@nutui/icons-vue-taro';
const props = withDefaults(
  defineProps<{
    startTime: string;
    endTime: string;
  }>(),
  {
    startTime: '',
    endTime: '',
  },
);

const emits = defineEmits<{
  /**
   * 选择全部
   */
  (e: 'allSelected');
  /**
   * 选择时间过滤器
   */
  (e: 'timeSelected');
}>();
/**
 * 筛选state
 */
const filterState = reactive<{
  /**
   *筛选项
   */
  filterItemList: { name: string }[];

  /**
   * 筛选提示框是否显示
   */
  filterItemVisible: boolean;
}>({
  filterItemVisible: false,
  filterItemList: [{ name: '全部' }, { name: '按时间筛选' }],
});

/**
 *点击筛选图标，弹出选择窗口
 */
function displayPopup() {
  filterState.filterItemVisible = !filterState.filterItemVisible;
}

const filterText = computed(() => {
  if (props.startTime && props.endTime) {
    return `${props.startTime} 至 ${props.endTime} `;
  }
  return '全部';
});

/**
 *筛选项选择回调
 */
function filterItemChoose(item: unknown, index: number) {
  console.log(item, index);
  switch (index) {
    case 0: //全部
      emits('allSelected');
      break;
    case 1: //时间过滤
      emits('timeSelected');
      break;
  }
}
</script>

<template>
  <view class="app-time-range-filter__filter">
    <view class="app-time-range-filter__filter--left">
      <text>{{ filterText }}</text>
    </view>
    <view class="app-time-range-filter__filter--right" @click="displayPopup">
      <nut-icon-horizontal />
      <text id="popId">&nbsp;筛选</text>
    </view>
    <nut-popover
      v-model:visible="filterState.filterItemVisible"
      :list="filterState.filterItemList"
      location="bottom-end"
      targetId="popId"
      @choose="filterItemChoose"
    >
    </nut-popover>
  </view>
</template>

<style lang="scss">
.app-time-range-filter {
  &__filter {
    display: flex;
    align-items: center;
    font-size: 28px;
    color: #999;
    margin: 10px 20px 20px;
    &--left {
      flex: 1;
    }
    &--right {
      display: flex;
      align-items: center;
    }
  }
}
</style>
